<template>
    <div class="nav_wraper">
        <div class="nav_bar">
            <div class="logo">
                <router-link to="/">
                    <a href="https://www.whizen.com"><img :src="Whizen"/></a>
                </router-link>
            </div>
        </div>
        <!-- {{$t('nav.console')}} -->
        <div class="rr_wrap">
            <!-- 国际化 -->
            <div class="lang_wrap">
                <el-dropdown class="menu-dropdown" @command="handleCommandLanguage">
                    <span class="el-dropdown-link header_trigger vue-icon-earth">
                        {{ selLang }}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="item.value" v-for="(item, index) in lang" :key="index">{{item.label}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>


            <div class="media_wrap_min">

                <div class="nav_container">
                    <div class="collapseBto el-icon-s-unfold" v-show="isCollapse" @click="handleCollapseSidebar"></div>
                    <div class="collapseBto el-icon-s-fold" v-show="!isCollapse" @click="handleCollapseSidebar"></div>
                </div>

                <div class="nav_menu_wrap" v-show="isCollapse">
                    <el-menu class="el-menu-demo" text-color="#333" active-text-color="#333">
                        <template v-for="(item, index) in menus">

                            <template v-if="!item.children">
                                <router-link :target="item.blank == 0 ? 'self': '_blank'" :to="item.url?item.url:'/'">
                                    <el-menu-item :index="index+'_'">
                                        <span style="font-size: 0.35rem;font-weight: bold;">{{ item.name }}</span>
                                    </el-menu-item>
                                </router-link>
                            </template>

                            <template v-else>
                                <el-submenu :index="index+'_'">
                                    <template slot="title"><span style="font-size: 0.35rem;font-weight: bold;">{{ item.name }}</span></template>
                                    <div class="sub_menu_wrap">
                                        <div class="wrap">
                                            <div class="menu_wrap">
                                                <div class="title" v-for="(item1, ind) in item.children" :key="ind">
                                                    <router-link :target="item1.blank == 0 ? 'self': '_blank'" :to="item1.url?item1.url:'/'">
                                                        <span style="font-size: 0.3rem;">{{ item1.name }}</span>
                                                    </router-link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-submenu>
                            </template>
                        </template>
                    </el-menu>
                </div>
            </div>


            <div class="media_wrap_full">
                <el-menu class="el-menu-demo" mode="horizontal" text-color="#333" active-text-color="#333">
                    <template v-for="(item, index) in menus">

                        <template v-if="!item.children">
                            <router-link :target="item.blank == 0 ? 'self': '_blank'" :to="item.url?item.url:'/'">
                                <el-menu-item :index="index+'_'">
                                    {{ item.name }}
                                </el-menu-item>
                            </router-link>
                        </template>

                        <template v-else>
                            <el-submenu :index="index+'_'">
                                <template slot="title">{{ item.name }}</template>
                                <div class="sub_menu_wrap">
                                    <div class="wrap">
                                        <div class="sub_menu_title">{{ item.name }}</div>
                                        <div class="menu_wrap">
                                            <div class="title" v-for="(item1, ind) in item.children" :key="ind">
                                                <router-link :target="item1.blank == 0 ? 'self': '_blank'" :to="item1.url?item1.url:'/'">
                                                    {{ item1.name }}
                                                </router-link>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-submenu>
                        </template>
                    </template>
                </el-menu>
            </div>
        </div>

    </div>

</template>
<script>
import Whizen from '@/assets/images/wi/10.png'
import { setStore, getStore } from '@/libs'
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "index",
    components: {
        Whizen
    },
    computed: {
        ...mapGetters(['collapseSidebar'])
    },
    data() {
        return {
            Whizen,

            menus: null,

            isCollapse: false,

            selLang: '',

            // 国际化
            lang: [
                {label: this.$t('lang.zh'), value: 0},
                {label: this.$t('lang.jp'), value: 1},
                // {label: this.$t('lang.en'), value: 2},
            ]
        }
    },

    // 监听,当路由发生变化的时候执行
    watch: {
        $route: {
            handler: function(val, oldVal){
                // 因为同一个页面，传参数来加载不同的tab，不会刷新，所以监听。参数不同，则自动刷新页面
                if(val.path === oldVal.path && val.query.tab !== oldVal.query.tab) {
                    window.location.reload()
                }
            },
            // 深度观察监听
            deep: true
        }
    },

    created() {
        let language = getStore({name: 'language'})
        // language="zh"
        if(language) {
            this.$i18n.locale = language
            // this.$i18n.locale = "zh"
        } else {
            setStore({ name: 'language', content: 'zh' })
        }
        this.selLang = language? this.$t('lang.'+language) : '简体中文'

        this.lang = [
            {label: this.$t('lang.zh'), value: 0},
            {label: this.$t('lang.jp'), value: 1},
        ]

        if(language === 'jp') {
            document.title = '広東華智科技有限公司'
        } else {
            document.title = '广东华智科技有限公司'
        }

        this.getListWithTree()
    },
    mounted() {
        this.$nextTick(() => {
        })
    },

    methods: {
        ...mapMutations(["toggleCollapseSidebar"]),

        /**
         * 国际化
         * @param {*} command
         */
         handleCommandLanguage(command) {
            if(command === 0) {
                this.$i18n.locale = 'zh'
                this.selLang = this.$t('lang.zh')
            } else if(command === 1) {
                this.$i18n.locale = 'jp'
                this.selLang = this.$t('lang.jp')
            } else if(command === 2) {
                this.$i18n.locale = 'en'
                this.selLang = this.$t('lang.en')
            }
            setStore({ name: 'language', content: this.$i18n.locale })
            // setStore({ name: 'language', content: "zh" })


            this.lang = [
                {label: this.$t('lang.zh'), value: 0},
                {label: this.$t('lang.jp'), value: 1},
            ]

            window.location.reload()
        },

        handleCollapseSidebar() {
            // this.toggleCollapseSidebar()
            this.isCollapse = !this.isCollapse
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },

        /**
         * 获取数据
         */
        async getListWithTree() {
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/sitenav/listWithTree',
                method: 'GET',
                params: {country}
            })
            if (this.ResultMessage(res, false)) {
                if(res.data) {
                    this.menus = res.data
                }
            }
        },

    }
};
</script>

<style lang="scss">
.el-menu-item:not(.is-disabled):hover{
    background: #fff;
}
.el-menu-demo{
    a{
        background-color: #fff;
        text-decoration: none;
    }
}
.el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6;
    background-color: #fff;
}
.el-menu--horizontal>.el-submenu .el-submenu__title{
    line-height: 56px;
}
.el-menu--horizontal{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    border-bottom: solid 0px #e6e6e6;
}
.el-menu-item{
    background-color: #fff;
}
.el-submenu, .el-submenu__title, .el-submenu__icon-arrow, .el-icon-arrow-down{
    background-color: #fff;
}
.el-icon-arrow-down:before{
    background-color: #fff;
}
.el-menu--horizontal>.el-menu-item {
    color: red;

}
.el-menu--popup{
    display: flex;
    width: 100%;
    padding-bottom: 100px;
    min-width: 100%;
    top: -5px;
    left: 7px;
}

.sub_menu_wrap{
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #fff;
    flex-wrap: wrap;

    .wrap{
        width: 80%;

        .sub_menu_title{

            font-size: 28px;
            padding: 30px 0;
            color: #333;
            font-weight: 900;
            background-color: #fff;
        }

        .menu_wrap{
            display: flex;
            background-color: #fff;
            flex-wrap: wrap;

            .title{
                margin-right: 50px;
                margin-bottom: 10px;

                color: #333;
                font-size: 18px;
                background-color: #fff;
                min-width: 120px;
                a{
                    background-color: #fff;
                    &:hover{
                        border-bottom: 2px solid #98000A;
                        padding-bottom: 5px;
                    }
                }

            }
        }

    }
}

.rr_wrap{
    .lang_wrap{

        .el-dropdown{
            font-size: 22px;
        }
    }

}
.el-dropdown-menu{
    .el-dropdown-menu__item{
        font-size: 22px;
    }
}

.nav1{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 190px;
    max-width: 190px;
    font-size: 14px;
    margin-right: 20px;
    font-size: 14px;
    padding: 5px 20px;
    cursor: pointer;
    letter-spacing: .63px;
    border: 1px solid #ccc;
    border-radius: 30px;
    color: rgb(51, 51, 51);
    background-color: #fff;
    border: 1px solid #000;
    text-align: center;
}

</style>
<style lang="scss" scope>
@import './index'
</style>
